<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
    };
  },
  // 计算属性的优势：
  // 带缓存
  // 计算属性对应的函数执行后，会把return值缓存起来，依赖项不变，多次调用都是从缓存中取值
  // 依赖项值发生变化，函数会自动重新执行，并缓存新的值
  computed: {
    reverseMessage() {
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    getMessage() {
      console.log("函数执行了");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>